<template>
	<!-- 创建笔记 -->
	<view class="cs-note-create">
		<!-- 标题 -->
		<view class="cs-create-tc" >
			<input class="tc-input" type="text" confirm-type="done" v-model="noteTitle" placeholder="请输入标题" placeholder-style="color:#C2C2C2" focus/>
		</view>
		<!-- 富文本 -->
		<view class='toolbar' @tap="format">
			<!-- 颜色A -->
			<view>
				<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont iconziti icon_caozuo"
				 data-name="backgroundColor" data-value="#00ff00"></view>
			</view>
			
			<!-- 对勾 -->
			<view>
				<view class="iconfont iconduigou1 icon_caozuo" data-name="list" data-value="check"></view>
			</view>
			 <!-- 后退/前进 -->
			 <view>
				 <view class="iconfont iconshangyibu icon_caozuo" @tap="undo"></view>
			 </view>
			<view>
				<view class="iconfont iconxiayibu icon_caozuo" @tap="redo"></view>
			</view>
			<!-- 插入图片 -->
			<view>
				<view class="iconfont icontupian icon_caozuo" @tap="insertImage"></view>
			</view>
			<!-- 手/笔 --> 
			<view>
				<view class="iconfont iconshouxieqianpi icon_caozuo" @tap="clickOpen"></view>
			</view>
		</view>
		<editor id="editor" class="ql-container" :read-only="isDraw" placeholder="开始输入..." showImgSize showImgToolbar showImgResize
		 @statuschange="onStatusChange" @ready="onEditorReady">
		</editor>
		
		<!-- 手/笔 -->
		<v-open v-if='isOpen' @changeOpen='changeOpen' :is_top='false'></v-open>
		<!-- 草稿 -->
		<v-draw v-if='isDraw' @clickDraw='clickDraw'></v-draw>
	</view> 
</template>

<script>
	import open from './components/Base-open'
	import draw from './components/Base-draw'
	import api from '@/common/group-http/notehttp.js'
	export default {
		components: {
			vOpen: open,
			vDraw: draw
		},
		// 点击完成
		onNavigationBarButtonTap() {
			if (this.noteTitle.trim().length <= 0) return uni.showToast({title: '请输入标题', icon: 'none'})
			// 获取富文本，并开始添加笔记
			this.editorCtx.getContents({
				success: res => {
					this.noteText = JSON.stringify(res.delta)
					// 添加笔记 [192.168.1.12:7000/note/addGeneralNote]
					api.post('/note/addFolderNote', {
						folderId: this.folderId,
						noteTitle: this.noteTitle,
						noteText: this.noteText,
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '添加成功'
							})
							// 1秒后进行后退到笔记列表
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				}
			})
		},
		data() {
			return {
				noteTitle: '', // 笔记标题
				noteText: '', // 内容
				noteVoice: '', // 语音地址
				noteClock: '', // 笔记闹钟,
				iconArr: [ // 图标数组
					{icon: 'iconziti', title: '字体'},
					{icon: 'iconduigou1' , title: '对勾'},
					{icon: 'icontupian', title: '图片' },
					{icon: 'iconyuyin1', title: '语音' },
					{icon: 'iconnaozhong', title: '闹钟'},
					{icon: 'iconshouxieqianpi', title: '手写签批'},
				],
				userInfo: uni.getStorageSync('userInfo'),
				
				editorCtx: null, // 富文本上下文
				formats: {}, // 富文本样式对象
				
				isOpen: false, // 手/笔开关
				isDraw: false, // 画布开关
			}
		},
		onLoad(e) {
			this.folderId = e.folderId // 获取文件夹ID
		},
		methods: {
			// 初始化富文本
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			// 撤销
			undo() {
				this.editorCtx.undo()
			},
			// 恢复
			redo() {
				this.editorCtx.redo()
			},
			// 修改样式
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)
			},
			// 监听富文本
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			// 清除当前所选
			removeFormat() {
				this.editorCtx.removeFormat()
			},
			// 选择图片
			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function() {
								console.log('insert image success')
							}
						})
					}
				})
			},
			
			// 启动/隐藏手/笔
			clickOpen() {
				this.isOpen = !this.isOpen
			},
			// 手笔选择事件
			changeOpen(title) {
				if (title === 'hand') { // 点击了手
					this.isDraw = true // 启动画布
					this.isOpen = false // 关闭手笔两个按钮
				}
				if (title === 'pen') { // 点击了笔
					uni.showToast({title: '暂未开通~', icon: 'none'})
				}
			},
			// 画布点击事件
			clickDraw(title) {
				if (title === 'save') {
					uni.showToast({title: '保存成功'})
					this.isDraw = false // 保存后进行关闭画布
					
					// 插入图片
					this.editorCtx.insertImage({
						src: uni.getStorageSync('imgbase'),
						alt: '图像',
						success: function() {
							console.log('insert image success')
						}
					})
				} else if (title === 'close') {
					this.isDraw = false // 关闭画布
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		overflow: hidden;
		background: #FAFAFA;
	}
	.cs-note-create{
		position: absolute;
		height: 100%;
		left: 0;right: 0;
		overflow: hidden;
	}
	
	// 输入标题
	.cs-create-tc{
		padding: 20upx 30upx;
		background: #FFFFFF;
	}
	.tc-input{
		font-size: 34upx;
		color: #333333;
	}
	
	// 富文本
	.toolbar{
		display: flex;
		position: fixed;
		bottom: 0;left: 0;right: 0;
		justify-content: space-around;
		z-index: 1;
		text-align: center;
		font-size: 32upx;
		color: #666666;
		box-shadow:0px -2px 4px rgba(0,0,0,0.16);
		background: #FFFFFF;
	}
	.ql-container{
		padding: 0 20upx;
		height: calc(100% - 250upx);
	}
	// 图标
	.icon_caozuo{
		color: #000000;
		font-size: 50upx;
	}
</style>
